cc-pocket · mobile ui 2.0 · entry flow · master · v2

Entry Flow Master v2

v2 is a macro-composition correction to one thing: the Projects header. Everything else — routes, fixtures, states, tokens, row density, pairing, recovery, picker and configuration — is v1 unchanged, and v1 is still on disk. Every frame below is the same live component at 402 × 874; tap through them.

live prototype
402 × 874 · 1:1
header v2
everything else v1
no new tokens
no protocol change
H

Projects header · macro composition

The only change in v2. Applied to every Projects surface and every backdrop behind a sheet.

v1 stacked three bands under the title: machine state, then a leading text band holding Review, Help and Settings, then the filter. The upper-right corner of the screen carried nothing, while three destinations of very unequal weight shared one undifferentiated row.

v2 makes that corner purposeful. Row 1 is the title with exactly two controls at its trailing edge: the computer doorway — an outlined display, not a plus, because it switches machines rather than creating anything — and an overflow trigger. Row 2 keeps the written machine and connection state where it was and puts Review at the trailing edge with its real count, so the one queue that can block work stays a single tap away.

Help and Settings move into the overflow, where destinations outside the working loop belong; the update dot rides the trigger and repeats on Settings so the badge has somewhere to lead. Nothing else moved. No top-level plus, no second New session, and Open any folder… is still the one content doorway.

H1 · Ready · Review 2
Two rows, then the filter. Review carries the diamond and the real count; the count disappears rather than showing a zero.
H2 · Connecting
Identical header geometry — same two rows, same control positions. Only the mark, the state word and the list below change, so nothing jumps when directories arrive.
H3 · Reconnecting
The header holds still while the connection wobbles. The diamond and the word reconnecting carry the state; the slim banner and the last known list sit underneath.
H4 · Overflow open · update dot
Help and Settings, 48 pt each, wired to the same stubs as v1. Tapping anywhere outside closes it; so does the trigger. The dot on the trigger repeats beside Settings, which is where the update actually lives.
H5 · 200% type · light
9:41

Projects

Panda · MacBook Pro · online
Review 2
Filter TreeFlat
Open any folder…
Active
cc-pocket
Running
Add demo mode for App Review
New session cc-pocket · Claude · Default
What the header promises at any size
Row 2 reflows, it does not shrink

At 200% the machine line wraps and Review drops beneath it rather than truncating. Both stay above the filter, and the title, both controls, Review and Open any folder… all remain reachable without scrolling.

Targets grow with the type

48 pt at default size, 56 at 200%. The ink stays optically aligned to the gutter through negative margins, so a larger hit box never pushes the glyph off the 20 pt line.

State is never colour alone

Filled dot, diamond and square keep their meanings in both palettes, each next to a written word. The update dot is an accent circle on a control that also carries a label in its menu.

Semantics and dismissal
Named, focusable, announced

Both header controls and Review are buttons with explicit labels — Computers, More options, and Review Center with its waiting count — reachable by keyboard and activated by Enter or Space. The trigger reports aria-expanded, and the panel is a menu of menu items.

Three ways out of the menu

Tap outside, tap the trigger again, or choose an item. Opening it changes nothing and starts nothing; it is a disclosure, not a decision.

Applied everywhere Projects appears

Ready, Connecting, Reconnecting, offline, and every backdrop behind the picker, configuration, OpenCode and the full-access confirmation — one header, rendered once in the component.

A

Walk the flow

Starts unpaired. The rail beside it is host chrome for review — it is not part of the product.
Acceptance paths, wired
01Tap the code field six times, then Pair computer → Connecting → Projects. The camera is never touched.
02Enter two digits, open Scan QR code, meet the unavailable camera, come back — the digits are still there and the screen says so.
03From Projects, tap the machine row → Computers → tap another computer → the Projects-shaped skeleton → Projects, header geometry unmoved.
04Simulate each failing phase: Relay unreachable and Computer offline offer Retry and Exit; Pairing invalid offers Pair again and Remove, and no Retry.
05Type in the filter until nothing matches; the empty state offers Clear filter and the same single open-folder entry.
 
06Open the picker: use a recent, drill a child, switch root to /, open Library → Application Support for the unreadable state, and Downloads for the empty one.
07Enter a path manually, then Options: configuration opens on that directory and nothing has started.
08Switch agent and watch Model and Mode reset to that agent's own set; the Start caption reprints before it can be tapped.
09Select Full access → Start opens the confirmation. Cancel returns with Full access still selected and nothing started.
10Any start leaves the configuration screen for a started state, so a second tap has nothing to start. The scrim, ✕ and Options never start anything.
Prototype boundaries

Chat, Review Center, Help, Settings and Demo open a stub that names the surface and stops. Copy actions report success without touching the clipboard. Everything else is the real flow.

B

The five surfaces

Each frame is independently live — drive any of them without disturbing the others.
01 · Pair a computer
Code first, scan and paste as peers below the hairline, the daemon command as copyable help, demo last in secondary text. Pair stays inert until six digits exist.
02 · Choose / recover a computer
Rows carry the label → hostName → truncated accountId fallback, the account caption, the role, and which binding is active. Rename and remove sit under the row menu; nothing invents latency or last seen.
03 · Projects · Ready
Title with two trailing controls → machine state with Review → filter → one Open any folder… row. The dock is New session plus a defaults chevron; the chevron opens configuration and starts nothing.
04 · Directory picker
Header names the remote computer. Recents pin at the home root and disappear on drill. Selected path stays visible and copyable; the decision region never scrolls away.
05 · Configure session · Claude
Workdir, Agent, Model, Mode, in that order. Mode rows read as selection — a check, no button ink. One filled Start, printing the exact combination it will run.
06 · Configure · Codex · studio-mini
A computer that reports no Kimi support simply has no Kimi chip, and the omission is stated in words. Reported model ids fill the angle-bracket slots verbatim.
C

States that decide whether the flow survives

Six ConnPhase values, an unusable camera, an automatic backend and one destination that has to be confirmed.
07 · Scan · camera unavailable
Entered on purpose, never on launch. Unavailable and denied share this layout; both routes back to code and paste are repeated here rather than linked away.
08 · Connecting · Projects skeleton
Same header geometry and same dock as frame 03, so directories replace bars in place. Ready is never claimed before the list arrives.
09 · Relay unreachable
The relay was not reached, and the sentence blames neither the daemon nor the credential. Retry is canonical; Exit disconnects. The paired list stays flat underneath.
10 · Computer offline
Relay reachable, daemon not running, existing hint kept. Retry and Exit outside Chat; inside Chat the history stays under a slim banner instead.
11 · Pairing invalid
The credential was rejected, so Retry is not offered — it cannot help. Pair again returns to frame 01 with a real back path; Remove drops the dead binding.
12 · Reconnecting · content preserved
A connection that was ready and dropped keeps its list. The banner is slim, sits under the header, and the machine row changes its mark and its word — never only its colour.
13 · OpenCode · automatic
Mode is replaced by a statement, not filled with disabled rows. The mark is attention, not danger: this is honest backend behaviour, not a hazardous choice. Start prints automatic.
14 · Full access confirmation
The existing safety step, restyled. It names the agent, the workdir and the computer. Cancel returns to configuration with the mode still selected and nothing started.
D

Light palette at 200% type

The hardest surface in the hardest condition: context pinned, body scrolling, Start still reachable.
15 · Configure · 200% · light
9:41
New session
cc-pocket
/Users/alex/code/cc-pocket
Agent
Claude Codex OpenCode Kimi
Model
Follow the computer's default
this computer reported no model list
Mode
Default
Asks before anything that changes files or runs a command.
Accept edits
Edits files without asking. Still asks before running commands.
Start sessioncc-pocket · Claude · Default
What holds at 200%
Context and decision stay pinned

Only the middle scrolls. The user can still read which directory they are in and still reach the control that starts it.

Nothing shrinks to fit

Agent chips wrap to a second line; the Start caption wraps on characters and the control grows. No label is truncated and no row has a fixed height.

Light keeps state priority

Ring, diamond, square and filled dot carry state in both themes. Colour only confirms what the shape and the sentence already said.

Still owned by code
Model ids

Rendered as ⟨model id n⟩ slots. Real ids come from the daemon list verbatim; when there is no list the row reads as following the computer's default.

CODEX_PRESETS axes

The four preset names are product truth; their approval and sandbox pairs are not written here. The rows explain behaviour in plain language only.

Capability gating

Which agents a computer reports, and whether Claude's native Auto exists, come from capability. The prototype models this per computer; the real flags live in the repository.

Localised strings

Every label here is the product's English string. Translations come from product resources; rows already have no fixed heights, so longer strings grow rather than clip.

Not claimed anywhere
per-device latency · last seen · OS
repository health · test results
branch on inactive rows · file counts
online state inferred from a LAN url